<template>
  <div style="color:#666;">
    <div style="margin: 20px 0">
      <div class="pd-10" style="font-size: 20px; color: #46c2fc;cursor: pointer">{{ article.name }}</div>
      <div style="font-size: 14px;margin-top: 10px">
        <i class="el-icon-user-solid" style="margin-left: 10px"></i>
        <sapn>{{ article.user }}</sapn>
        <i class="el-icon-time" style="margin-left: 10px"></i>
        <sapn>{{ article.time }}</sapn>
      </div>
    </div>
    <div style="margin: 20px 0">
      <mavon-editor
          class="md"
          :value="article.content"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="false"
          :editable="false"
          :scrollStyle="true"
          :ishljs="true"
      />
    </div>

    <div style="margin: 30px 0">
      <div style="margin: 10px 0">
        <div style="border-bottom: 1px solid orangered; padding:10px 0; font-size: 20px">评论</div>
        <div style="padding: 10px 0">
          <el-input size="small" type="textarea" v-model="commentFrom.content"></el-input>
        </div>
        <div class="pd-10" style="text-align: right">
          <el-button type="primary" @click="save">评论</el-button>
        </div>
      </div>
      <!--      评论列表-->
      <div>
        <div v-for="item in comments" :key="item.id"
             style="border-bottom: 1px solid #ccc; padding: 10px 0;">

          <div style="display: flex;">
            <!--头像-->
            <div style="width: 100px; text-align: center">
              <el-image :src="item.avatarUrl" style="width: 50px;height: 50px;border-radius: 50%"></el-image>
            </div>
            <!-- 内容-->
            <div style="font-size: 14px; padding: 5px 0; line-height: 25px">
              <b>{{ item.nickname }}: </b>
              <div style="margin-left: 20px">{{ item.content }}</div>

              <div style="display: flex; line-height: 20px; margin-top: 5px">
                <div style="width: 200px;">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 5px">{{ item.time }}</span>
                </div>
                <div style="text-align: right;flex: 1;position: absolute;right: 230px;">
                  <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复</el-button>
                  <el-button type="text" style="color: red" @click="del(item.id)" v-if="user.id === item.userId">删除
                  </el-button>
                </div>

              </div>
            </div>
          </div>
          <div>
          </div>

          <div v-if="item.children.length" v-for="subItem in item.children" :key="subItem.id"
               style="padding-left: 200px;">

            <div style="background-color: #f0f0f0; padding: 5px 20px">
              <!--            回复列表-->
              <div style="font-size: 14px; padding: 5px 0; line-height: 25px">
                <div style="display: flex">
                <div style="width: 25px; text-align: center;" >
                  <el-image :src="subItem.avatarUrl" style="width: 25px;height: 25px;border-radius: 50%"></el-image>
                </div>
                <div style="padding-left: 5px">
                  <b>{{ subItem.nickname }} ▶ <b style="color: #46c2fc" v-if="subItem.pnickname">{{ subItem.pnickname }}</b>
                  </b>
                  <div>{{ subItem.content }}</div>
                </div>
                </div>
                <div style="display: flex; line-height: 20px; margin-top: 5px;padding-left: 5px;" >
                  <div style="width: 200px;">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 5px">{{ subItem.time }}</span>
                  </div>
                  <div style="text-align: right;flex: 1; position: absolute;right: 230px;">
                    <el-button style="margin-left: 5px" type="text" @click="handleReply(subItem.id)">回复</el-button>
                    <el-button type="text" style="color: red" @click="del(subItem.id)" v-if="user.id === subItem.userId">删除
                    </el-button>
                  </div>

                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <el-dialog title="回复" :visible.sync="dialogFormVisible" width="50%">
      <el-form label-width="80px" size="small">
        <el-form-item label="评论内容">
          <el-input type="textarea" v-model="commentFrom.contentReply" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>

export default {
  name: "Article",
  data() {
    return {
      article: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      comments: [],
      commentFrom: {},
      id: this.$route.query.id,
      dialogFormVisible: false


    };
  },

  created() {
    this.load();
    this.loadComment()
  },

  methods: {
    load() {
      //加载数据
      this.request.get("/article/" + this.id).then((res) => {
        console.log(res);
        this.article = res.data;
        console.log("this.article", this.article)
      });
    },

    save() {
      if (!this.user.id) {
        this.$message.warning('请登录后操作')
        return;
      }
      this.commentFrom.articleId = this.id
      // 下面if设置回复的信息不会触发动态绑定到输入框
      if (this.commentFrom.contentReply) {
        this.commentFrom.content = this.commentFrom.contentReply
      }
      this.request.post("/comment", this.commentFrom).then((res) => {
        if (res.code === '200') {
          this.$message.success("评论成功");
          this.loadComment();
          this.commentFrom = {}  //初始化评论对象内容
          this.dialogFormVisible = false

        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 删除
    del(id) {
      this.request.delete("/comment/" + id).then((res) => {
        if (res.code === "200") {
          this.$message.success("删除成功");
          this.loadComment();
        } else {
          this.$message.error("删除失败");
        }
      });
    },

    // 评论内容
    loadComment() {
      this.request.get("/comment/tree/" + this.id).then((res) => {
        console.log('tree', res);
        this.comments = res.data;
      });
    },
    // pid是评论的id
    handleReply(pid) {
      this.commentFrom = {pid: pid}
      this.dialogFormVisible = true
    }
  },
};
</script>

<style scoped>
.headerBg {
  background-color: #eee !important;
}
</style>